<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递模板自动生成系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-hover: #3a56d4;
            --secondary-color: #f8f9fa;
            --text-color: #333;
            --light-text: #6c757d;
            --border-color: #dee2e6;
            --success-color: #28a745;
            --error-color: #dc3545;
            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: var(--text-color);
            line-height: 1.6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 500px;
        }
        
        .upload-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), #3f37c9);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        .card-header h2 {
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .card-header p {
            font-weight: 300;
            opacity: 0.9;
            font-size: 14px;
        }
        
        .card-body {
            padding: 30px;
        }
        
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            margin-bottom: 25px;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }
        
        .upload-area.active {
            border-color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }
        
        .upload-icon {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .upload-text {
            margin-bottom: 15px;
        }
        
        .upload-text h4 {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .upload-text p {
            color: var(--light-text);
            font-size: 14px;
        }
        
        .file-input {
            display: none;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            transition: var(--transition);
            width: 100%;
        }
        
        .btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .template-link {
            display: block;
            text-align: center;
            margin: 15px 0;
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
        }
        
        .template-link:hover {
            text-decoration: underline;
            color: var(--primary-hover);
        }
        
        .file-info {
            margin-top: 15px;
            padding: 10px;
            background-color: var(--secondary-color);
            border-radius: 6px;
            font-size: 14px;
            display: none;
        }
        
        .file-info.show {
            display: block;
        }
        
        .message {
            margin-top: 20px;
            padding: 12px;
            border-radius: 6px;
            font-size: 14px;
            text-align: center;
            display: none;
        }
        
        .message.success {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
            display: block;
        }
        
        .message.error {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--error-color);
            display: block;
        }
        
        .progress-container {
            margin-top: 20px;
            display: none;
        }
        
        .progress-container.show {
            display: block;
        }
        
        .progress-bar {
            height: 8px;
            background-color: var(--secondary-color);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), #4895ef);
            width: 0;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 12px;
            color: var(--light-text);
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: modalFadeIn 0.3s;
        }
        
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            margin: 0;
            color: var(--primary-color);
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--light-text);
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
        }
        
        .confirm-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: var(--transition);
        }
        
        .confirm-btn:hover {
            background-color: var(--primary-hover);
        }
        
        .result-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .result-item:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }
        
        .result-title {
            font-weight: 500;
            margin-bottom: 5px;
            color: var(--primary-color);
        }
        
        .result-content {
            background-color: var(--secondary-color);
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .download-btn {
            display: inline-block;
            background-color: var(--success-color);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 20px;
            transition: var(--transition);
        }
        
        .download-btn:hover {
            background-color: #218838;
        }
        
        @media (max-width: 576px) {
            .card-header {
                padding: 20px;
            }
            
            .card-body {
                padding: 20px;
            }
            
            .upload-area {
                padding: 20px;
            }
            
            .modal-content {
                width: 95%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-card">
            <div class="card-header">
                <h2>快递模板自动生成系统</h2>
                <p>上传Excel文件，一键生成快递模板</p>
            </div>
            <div class="card-body">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                    </div>
                    <div class="upload-text">
                        <h4>拖放文件到此处或点击上传</h4>
                        <p>支持 .xls 或 .xlsx 格式的Excel文件</p>
                    </div>
                    <input type="file" id="fileInput" class="file-input" accept=".xls,.xlsx">
                </div>
                
                <div class="file-info" id="fileInfo"></div>
                
                <a href="https://tulruit.oss-cn-shanghai.aliyuncs.com/excel/%E9%80%94%E9%94%90%E6%96%B0%E6%A8%A1%E6%9D%BF.xlsx" class="template-link" target="_blank">下载Excel模板文件</a>
                
                <button class="btn" id="uploadBtn" disabled>生成快递模板</button>
                
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar">
                        <div class="progress" id="progressBar"></div>
                    </div>
                    <div class="progress-text" id="progressText">上传中: 0%</div>
                </div>
                
                <div class="message" id="message"></div>
            </div>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div class="modal" id="resultModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>处理结果</h3>
                <button class="modal-close" id="modalClose">&times;</button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 结果内容将在这里动态插入 -->
            </div>
            <div class="modal-footer">
                <button class="confirm-btn" id="confirmBtn">确定</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
            const fileInfo = document.getElementById('fileInfo');
            const uploadBtn = document.getElementById('uploadBtn');
            const message = document.getElementById('message');
            const progressContainer = document.getElementById('progressContainer');
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            const resultModal = document.getElementById('resultModal');
            const modalBody = document.getElementById('modalBody');
            const modalClose = document.getElementById('modalClose');
            const confirmBtn = document.getElementById('confirmBtn');
            
            let selectedFile = null;
            
            // 点击上传区域触发文件选择
            uploadArea.addEventListener('click', function() {
                fileInput.click();
            });
            
            // 拖放功能
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('active');
            });
            
            uploadArea.addEventListener('dragleave', function() {
                this.classList.remove('active');
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('active');
                
                if (e.dataTransfer.files.length) {
                    handleFileSelection(e.dataTransfer.files[0]);
                }
            });
            
            // 文件选择处理
            fileInput.addEventListener('change', function() {
                if (this.files.length) {
                    handleFileSelection(this.files[0]);
                }
            });
            
            // 关闭弹窗
            modalClose.addEventListener('click', function() {
                resultModal.style.display = 'none';
            });
            
            // 确定按钮点击事件
            confirmBtn.addEventListener('click', function() {
                resultModal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            resultModal.addEventListener('click', function(e) {
                if (e.target === resultModal) {
                    resultModal.style.display = 'none';
                }
            });
            
            function handleFileSelection(file) {
                // 检查文件类型
                const validExtensions = ['.xls', '.xlsx'];
                const fileExtension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
                
                if (!validExtensions.includes(fileExtension)) {
                    showMessage('请上传有效的 Excel 文件（.xls 或 .xlsx）', 'error');
                    return;
                }
                
                selectedFile = file;
                
                // 显示文件信息
                fileInfo.innerHTML = `
                    <strong>已选择文件:</strong> ${file.name}<br>
                    <strong>大小:</strong> ${formatFileSize(file.size)}
                `;
                fileInfo.classList.add('show');
                
                // 启用上传按钮
                uploadBtn.disabled = false;
                
                // 隐藏任何先前的消息
                message.className = 'message';
            }
            
            // 上传按钮点击事件
            uploadBtn.addEventListener('click', function() {
                if (!selectedFile) {
                    showMessage('请先选择文件', 'error');
                    return;
                }
                
                uploadFile(selectedFile);
            });
            
            function uploadFile(file) {
                const formData = new FormData();
                formData.append('file', file);
                
                // 显示进度条
                progressContainer.classList.add('show');
                progressBar.style.width = '0%';
                progressText.textContent = '上传中: 0%';
                
                // 禁用上传按钮
                uploadBtn.disabled = true;
                uploadBtn.textContent = '处理中...';
                
                // 使用XMLHttpRequest以便获取上传进度
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://127.0.0.1:8080/auto', true);
                
                // 上传进度事件
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = Math.round((e.loaded / e.total) * 100);
                        progressBar.style.width = percentComplete + '%';
                        progressText.textContent = `上传中: ${percentComplete}%`;
                    }
                });
                
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        showMessage('文件上传成功，模板生成完成！', 'success');
                        // 显示结果弹窗
                        showResultModal(xhr.responseText);
                        // 重置表单
                        resetForm();
                    } else {
                        showMessage(`文件上传失败: ${xhr.statusText}`, 'error');
                        uploadBtn.disabled = false;
                        uploadBtn.textContent = '生成快递模板';
                    }
                    progressContainer.classList.remove('show');
                };
                
                xhr.onerror = function() {
                    showMessage('上传过程中发生错误，请重试', 'error');
                    uploadBtn.disabled = false;
                    uploadBtn.textContent = '生成快递模板';
                    progressContainer.classList.remove('show');
                };
                
                xhr.send(formData);
            }
            
            function showResultModal(response) {
                try {
                    // 尝试解析JSON响应
                    const result = JSON.parse(response);
                    
                    // 清空模态框内容
                    modalBody.innerHTML = '';
                    
                    // 添加结果内容
                    if (result.success) {
                        // 成功情况
                        const successItem = document.createElement('div');
                        successItem.className = 'result-item';
                        successItem.innerHTML = `
                            <div class="result-title">处理成功</div>
                            <div class="result-content">${result.message || '文件处理成功'}</div>
                        `;
                        modalBody.appendChild(successItem);
                        
                        // 如果有下载链接
                        if (result.downloadUrl) {
                            const downloadLink = document.createElement('a');
                            downloadLink.href = result.downloadUrl;
                            downloadLink.className = 'download-btn';
                            downloadLink.textContent = '下载模板文件';
                            downloadLink.target = '_blank';
                            modalBody.appendChild(downloadLink);
                        }
                        
                        // 如果有详细数据
                        if (result.data) {
                            const dataItem = document.createElement('div');
                            dataItem.className = 'result-item';
                            dataItem.innerHTML = `
                                <div class="result-title">处理详情</div>
                                <div class="result-content">${JSON.stringify(result.data, null, 2)}</div>
                            `;
                            modalBody.appendChild(dataItem);
                        }
                    } else {
                        // 失败情况
                        const errorItem = document.createElement('div');
                        errorItem.className = 'result-item';
                        errorItem.innerHTML = `
                            <div class="result-title">处理失败</div>
                            <div class="result-content">${result.message || '文件处理过程中出现错误'}</div>
                        `;
                        modalBody.appendChild(errorItem);
                        
                        // 如果有错误详情
                        if (result.error) {
                            const errorDetail = document.createElement('div');
                            errorDetail.className = 'result-item';
                            errorDetail.innerHTML = `
                                <div class="result-title">错误详情</div>
                                <div class="result-content">${JSON.stringify(result.error, null, 2)}</div>
                            `;
                            modalBody.appendChild(errorDetail);
                        }
                    }
                } catch (e) {
                    // 如果响应不是JSON格式，直接显示原始内容
                    modalBody.innerHTML = `
                        <div class="result-item">
                            <div class="result-title">处理结果</div>
                            <div class="result-content">${response}</div>
                        </div>
                    `;
                }
                
                // 显示模态框
                resultModal.style.display = 'flex';
            }
            
            function showMessage(text, type) {
                message.textContent = text;
                message.className = 'message ' + type;
            }
            
            function resetForm() {
                fileInput.value = '';
                fileInfo.classList.remove('show');
                uploadBtn.disabled = true;
                uploadBtn.textContent = '生成快递模板';
                selectedFile = null;
            }
            
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
        });
    </script>
</body>
</html>